<!DOCTYPE html>
<html lang="en">
<head>  
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>值得买</title>
    <link rel="stylesheet" href="./css/buy.css">
</head>
<body>
    <div id="recommed">
        <div id="header">
            <p id="index">
                <img src="./img/firstweb.png" alt=""></a>
            </p>
            <h1 id="title">值得买</h1>
            <p id="search"><img src="./img/search .png" alt=""></p>
            <p id="show"><img src="./img/show.png" alt=""></p>
        </div>
        <div id="background">
            <p id="backgd"><img src="./img/background.jpg" alt=""></p>
            <div id="top">
                <p id="onephoto"><img src="./img/t1.png" alt=""></p>
                <h2 id="string">严选好物 用心生活</h2>
            </div>
            <div id="label">
                <div id="tips">
                    <div id="onetip">
                        <p class="first"><img src="./img/01.png" alt=""></p>
                        <h1 class="light">好物大赏</h1>
                        <h2 class="bleak">购物先看榜</h2>
                        <p class="second"><img src="./img/02.png" alt=""></p>
                        <h1 class="light">晒单</h1>
                        <h2 class="bleak">入选就有红包</h2>
                    </div>
                    <div id="twotip">
                        <p class="first"><img src="./img/03.png" alt=""></p>
                        <h1 class="light">每月好物</h1>
                        <h2 class="bleak">5月必买清单</h2>
                        <p class="second"><img src="./img/04.png" alt=""></p>
                        <h1 class="light">新品体验官</h1>
                        <h2 class="bleak">开箱测评</h2>
                    </div>
                    <div id="threetip">
                        <p class="first"><img src="./img/05.gif" alt=""></p>
                        <h1 class="light">超值专区</h1>
                        <h2 class="bleak">新定价直降</h2>
                        <p class="second"><img src="./img/06.png" alt=""></p>
                        <h1 class="light">睡眠实验室</h1>
                        <h2 class="bleak">专研科技床品</h2>
                    </div>
                    <div id="fourtip">
                        <p class="first"><img src="./img/07.png" alt=""></p>
                        <h1 class="light">植系空间</h1>
                        <h2 class="bleak">居家绿植指南</h2>
                        <p class="second"><img src="./img/08.png" alt=""></p>
                        <h1 class="light">中国风物志</h1>
                        <h2 class="bleak">记录中国</h2>
                    </div>
                    <div id="line">
                        <p class="active"></p>
                        <p class="one"></p>
                        <p class="two"></p>
                        <p class="three"></p>
                        <p class="four"></p>
                    </div>    
                </div>
            </div>
        </div>
        <div id="content">
            <div id="thing">
                <div id="rank">
                    <div id="articleone">
                        <p><img src="./img/article01.jpg" alt=""></p>
                        <h1>Pro会员爱买榜--女士版</h1>
                        <div id="little">
                            <p class="tou"><img src="./img/01.png" alt=""></p>
                            <h2 class="left">好物大赏</h2>                          
                            <p class="watch"><img src="./img/eye.png" alt=""></p>
                            <h2 class="right">280</h2>
                        </div>
                    </div>
                    <div id="articleone">
                        <p><img src="./img/article03.jpg" alt=""></p>
                        <h1>Pro会员爱买榜--女士版</h1>
                        <div id="little">
                            <p class="tou"><img src="./img/01.png" alt=""></p>
                            <h2 class="left">好物大赏</h2>                          
                            <p class="watch"><img src="./img/eye.png" alt=""></p>
                            <h2 class="right">280</h2>
                        </div>
                    </div>
                </div>
                <div id="row">
                    <div id="articleone">
                        <p><img src="./img/article04.jpg" alt=""></p>
                        <h1>Pro会员爱买榜--女士版</h1>
                        <div id="little">
                            <p class="tou"><img src="./img/01.png" alt=""></p>
                            <h2 class="left">好物大赏</h2>                          
                            <p class="watch"><img src="./img/eye.png" alt=""></p>
                            <h2 class="right">280</h2>
                        </div>
                    </div>
                    <div id="articleone">
                        <p><img src="./img/article02.jpg" alt=""></p>
                        <h1>21年小龙虾上市！端午粽、夏凉床品，都上新啦~</h1>
                        <div id="little">
                            <p class="tou"><img src="./img/01.png" alt=""></p>
                            <h2 class="left">好物大赏</h2>                          
                            <p class="watch"><img src="./img/eye.png" alt=""></p>
                            <h2 class="right">445</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="after">
            <ul id="small-w">
                <a href="./index.html"><li>
                    <P class="photoes"><img src="./img/firstweb.png" alt=""></P>
                    <P class="string">首页</P>
                </li></a>
                <a href="./classification.html"><li>
                    <P class="photoes"><img src="./img/lei.png" alt=""></P>
                    <P class="string">分类</P>
                </li></a>
                <li>
                    <P class="photoes"><img src="./img/buy.png" alt=""></P>
                    <P class="string-1">值得买</P>
                </li>
                <li>
                    <P class="photoes"><img src="./img/show.png" alt=""></P>
                    <P class="string">购物车</P>
                </li>
                <li>
                    <P class="photoes"><img src="./img/user.png" alt=""></P>
                    <P class="string">个人</P>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>